<template>
  <div class="root">
    <m-header title="兴趣标签">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content">

      <div class="tag-manage">
        <div class="tag-input">
          <mu-text-field hintText="自定义标签(最多4个字)" v-model="customTagInput" />
          <mu-flat-button label="添加" color="#02a588" @click="addCustomTag" />
        </div>



        <div class="tag-con1">
          <div class="title">
            标签推荐
          </div>

          <div class="tag-list">
            <ul>
              <li v-for="(tag,index) in recommendedTagList" :class="'tag-bg-color'+(index%3)" @click="addTag(index)">{{tag}}</li>
            </ul>
          </div>
        </div>

        <div class="tag-con2">
          <div class="title">
            我的标签
          </div>

          <div class="tag-list">
            <ul>
              <li v-for="(item,index) in myTagList" :key="index" :class="'tag-bg-color'+(index%3)" @click="deleteTag(index)">{{item}}</li>
            </ul>
          </div>
        </div>

        <div class="buttonCon">
          <!--<mu-raised-button label="完成" class="raised-button" backgroundColor="#02a588" @click="updateTagList" />-->
          <mu-raised-button label="完成" class="raised-button" backgroundColor="#fd4ba3" @click="updateTagList" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import mHeader from '../components/header'
  import util from '../util/util.js'

  export default {
    components: {
      mHeader
    },
    data() {
      return {
        recommendedTagList: [],
        customTagInput: '',
        myTagList: [],
      }
    },
    computed: {

    },
    methods: {
      initMyTagList() {
        var source = this.$store.state.myInfo.tagList;
        for (var i = 0; i < source.length; i++) {
          this.myTagList.push(source[i].content);
        }
      },

      getRecommendTag() {
        var _this = this;
        this.$http.get('recommend/tag')
          .then(function (response) {
            if (response.data.code === '0') {
              _this.recommendedTagList = response.data.data.tagList;
            }
          });

      },

      updateTagList() {
        var _this = this;
        this.$http.post('user/tag', {
            contentList: _this.myTagList
          })
          .then(
            function (response) {
              if (response.data.code === '0') {
                // _this.concernedList = response.data.data.fansList;
                var arr = [];
                for (var i = 0; i < _this.myTagList.length; i++) {
                  arr.push({
                    content: _this.myTagList[i]
                  });
                }
                _this.$store.dispatch('UPDATE_MY_TAG_LIST', arr);

                _this.$router.go(-1); //后退
              }
            }
          ).catch(function (error) {

          });
      },

      deleteTag(index) {
        console.log('deleteTag');
        this.myTagList.splice(index, 1);
      },

      addTag(index) {
        console.log('addTag');
        this.myTagList.push(this.recommendedTagList[index]);
        // this.recommendedTagList.splice(index, 1);
      },

      addCustomTag() {
        if (this.customTagInput.length > 4) {
          util.toast('自定义标签长度不能超过4');
          return;
        }
        this.myTagList.push(this.customTagInput);
        this.customTagInput = '';
      }

    },
    mounted() {
      this.getRecommendTag();
      this.initMyTagList();
    }
  }

</script>

<style lang="less" scoped>
  /*@import "../assets/less/common.less";*/
  .tag-manage {
    padding: 16px;
  }
  
  .tag-input {
    /*padding: 16px 16px 8px 16px;*/
  }
  
  .title {
    color: #333333;
    font-size: 16px;
  }
  
  .tag-list {
    margin: 8px 0;
    li {
      display: inline-block;
      margin: 4px;
      padding: 2px 8px;
      color: white;
      border-radius: 4px;
    }
  }
  
  .tag-con1 {
    margin-top: 8px;
    min-height: 48px;
  }
  
  .tag-con2 {
    margin-top: 32px;
    min-height: 48px;
  }
  
  .tag-bg-color0 {
    background-color: #e82754;
  }
  
  .tag-bg-color1 {
    background-color: #9c55a1;
  }
  
  .tag-bg-color2 {
    background-color: #3cb2e2;
  }

</style>
